<template>
  <div>
    <!-- 
            1.添加标签
            2.编辑博客：标题，概述，标签，编辑，（发布时间不变）
            3.博客状态：显示或不显示
         -->
    <div style="text-align:left; padding:20px;">
      分类管理
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="removeClass(tag)"
        class="tag"
      >
        {{ tag }}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput"
        >+ New Tag</el-button
      >
    </div>

    <div class="add-blog-btn" @click="addBlog">
      新建博客
    </div>
    <div style="padding:20px">
      <template>
        <el-table :data="blogs" style="width: 100%">
          <el-table-column label="日期" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标题" width="300">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>概述: {{ scope.row.sketch }}</p>
                <div slot="reference" class="name-wrapper">
                  <span>{{ scope.row.title }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="分类" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.class }}</span>
            </template>
          </el-table-column>
          <el-table-column label="显示">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.display"
                active-value="1"
                inactive-value="0"
                @change="changeDisplay(scope.row.id, scope.row.display)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="编辑">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row, scope.row.id)"
                >编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="removeBlog(scope.$index, scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>



<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.tag {
  margin: 10px;
}

.Mblog-box {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 5px;
  margin-bottom: 10px;
  padding-top: 5px;
  border-radius: 5px;
  border-bottom-color: grey;
  border-bottom-width: 2px;
  box-shadow: lightgrey 0px 0px 10px;
  height: 50px;
}

.Mblog-index {
  display: inline-block;
  width: 60px;
  text-align: center;
  vertical-align: middle;
}

.Mblog-name {
  display: inline-block;
  width: 650px;
  text-align: left;
  vertical-align: middle;
}

.add-blog-btn {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  color: white;
  background: #409eff;
  border-color: #409eff;
}

.add-blog-btn:hover,
.add-blog-btn :active {
  cursor: pointer;
}
</style>

<script>
export default {
  name: "MBlog",
  data() {
    return {
      dynamicTags: ["德语", "计算机", "日常"],
      inputVisible: false,
      inputValue: "",
      show: true,
      blogs: [
      ]
    };
  },
  created: function() {
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 12
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        console.log("show tag success");
        that.dynamicTags = res.data.classList;
      },
      function(res) {
        console.log(res);
        console.log("啊呀，MBlog-getClass出错啦");
      }
    );

    //加载博客列表
    that = this;
    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 2
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        console.log("getFullBlogs");
        that.blogs = res.data.blogs;
         for(var i=0;i<res.data.classes.length;i++){
          that.blogs[i].class=res.data.classes[i];
        }
      },
      function(res) {
        console.log(res);
        console.log("啊呀，getFullBlogs出错啦");
      }
    );
  },
  methods: {
    removeClass(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      //在数据库中删除相应的tag
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/blog",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 14,
          removeClass: tag
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log("remove class success");
        },
        function(res) {
          console.log(res);
          console.log("啊呀，remove class出错啦");
        }
      );
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let flag = true;
      for (let i = 0; i < this.dynamicTags.length; i++) {
        if (this.dynamicTags[i] == this.inputValue) {
          flag = false;
        }
      }

      if (!flag) {
        this.$message({
          message: "该标签已存在，不能再添加咯",
          type: "error"
        });
      } else {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";

        let that = this;
        let qs = this.$qs;
        this.$http({
          url: "servlet/blog",
          method: "post",
          transformRequest: [
            function(data) {
              //在请求之前对data传参进行格式转换
              data = qs.stringify(data);
              return data;
            }
          ],
          data: {
            funcType: 13,
            addClass: inputValue
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
          }
        }).then(
          function(res) {
            console.log("add class success");
          },
          function(res) {
            console.log(res);
            console.log("啊呀，add class出错啦");
          }
        );
      }
    },
    addBlog() {
      console.log("新建博客");
      this.$router.replace("/blogEdit");
    },
    changeDisplay(id, display) {
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/blog",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 16,
          id: id,
          display: display
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log("change display success");
        },
        function(res) {
          console.log(res);
          console.log("啊呀，change display出错啦");
        }
      );
    },
    handleEdit(index, row, id) {
      this.$router.push({ path: "/blogEdit", query: { id: id } });
    },
    removeBlog(index,id){
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/blog",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 6,
          id: id
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log("delete blog success");
          that.blogs.splice(index,1);
        },
        function(res) {
          console.log(res);
          console.log("啊呀，delete blog出错啦");
        }
      );
    }
  }
};
</script>
